<template>
	<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="clickTab">
		<el-tab-pane
				v-for="(item, index) in editableTabs"
				:key="item.name"
				:label="item.title"
				:name="item.name"
		>

		</el-tab-pane>
	</el-tabs>
</template>

<script>
	export default {
		name: "Tabs",
		data() {
			return {

			}
		},
		computed: {
			editableTabs: {
				get(){
					return this.$store.state.menus.editableTabs
				},
				set(val){
					this.$store.state.menus.editableTabs = val
				}
			},
			editableTabsValue:{
				get(){
					return this.$store.state.menus.editableTabsValue
				},
				set(val){
					this.$store.state.menus.editableTabsValue = val
				}
			}
		},
		methods: {
			removeTab(targetName) {
				let tabs = this.editableTabs; //获取当前集合
				let activeName = this.editableTabsValue;  //获取当前高亮路径
				if(targetName === "Index"){
					return
				}

				if (activeName === targetName) {  //判断删除的是否为高亮路径
					tabs.forEach((tab, index) => {
						if (tab.name === targetName) {
							let nextTab = tabs[index + 1] || tabs[index - 1];
							if (nextTab) {
								activeName = nextTab.name;
							}
						}
					});
					this.$router.push({name: activeName})
				}

				this.editableTabsValue = activeName; //更改高亮路径
				this.editableTabs = tabs.filter(tab => tab.name !== targetName); //将与原来tabs不同的集合过滤出来，重新赋值

			},
			clickTab(target){
				this.$router.push({name: target.name})
			}
		}
	}
</script>

<style scoped>

</style>
